import React, { Component } from 'react';
import { StyleSheet, Text, View, Image, TouchableOpacity } from "react-native";
import { style } from '../../../../theme/style';
import { GLOBAL } from '../../../../config/global';


const scale = GLOBAL.SCALE;
export class CheckBoxCpt extends Component {
	constructor(props) {
		super(props);
		let { bigChecked, goodsName, index,reportStatus } = this.props.data || {};
		this.state = {
			bigChecked, goodsName, index,reportStatus
		}
	}

	componentWillMount () {

	}

	_bigbigCheckedFn = () => {
		let { checkedCallBack } = this.props || {};
		let { bigChecked, index } = this.state;
		this.setState({
			bigChecked: !bigChecked
		}, () => {
			console.log('111111', { bigChecked: this.state.bigChecked, index })
			checkedCallBack && checkedCallBack({ bigChecked: this.state.bigChecked, index });
		})
	}


	render () {
		let { bigChecked, goodsName ,reportStatus} = this.state;
		const checkOn = require('../../../../imgs/order/select-on.png');
		const checkOffAll = require('../../../../imgs/order/checkOffAll.png');
		return (

			<TouchableOpacity onPress={() => { this._bigbigCheckedFn() }} style={[styles.itemHead, { justifyContent: 'flex-start', alignItems: 'center' }]}>
				{reportStatus!=7?<Image style={styles.selectStyle} source={bigChecked ? checkOffAll : checkOn} />:null}
				<Text style={styles.itemTitle}>{goodsName}</Text>
			</TouchableOpacity>

		)
	}
}
const styles = StyleSheet.create({
	itemBox: {
		width: '100%',
		paddingTop: 15 * scale,
		paddingBottom: 15 * scale,
		backgroundColor: style.color.white,
		marginBottom: 20 * scale,
		borderRadius: 8 * scale
	},
	itemTitle: {
		fontSize: 16 * scale,
		fontWeight: 'bold'
	},
	itemCrux: {
		flexDirection: 'row',
		paddingTop: 10 * scale,
		paddingBottom: 10 * scale,
		position: 'relative'
	},
	itemQuantity: {
		fontSize: 13 * scale,
		color: style.color.themeColor,
		flex: 1
	},
	itemPrice: {
		fontSize: 13 * scale,
		color: style.color.lightRed,
		flex: 1
	},
	TagBox: {
		flexDirection: 'row',
		flexWrap: 'wrap',
		alignItems: 'center',
		marginTop: 5 * scale,
		marginBottom: 20 * scale
	},
	tags: {
		fontSize: 11 * scale,
		backgroundColor: '#E6E9F2',
		paddingLeft: 10 * scale,
		paddingRight: 10 * scale,
		paddingTop: 3 * scale,
		paddingBottom: 3 * scale,
		marginRight: 8 * scale,
		borderRadius: 8 * scale,
		overflow: 'hidden',
		marginTop: 5 * scale
	},
	itemTop: {
		paddingLeft: 15 * scale,
		paddingRight: 15 * scale
	},
	itemBottom: {
		paddingTop: 15 * scale,
		borderTopWidth: 2 * scale,
		borderStyle: 'solid',
		borderTopColor: '#eee',
		marginLeft: 8 * scale,
		marginRight: 8 * scale,
		paddingLeft: 5 * scale,
		paddingRight: 5 * scale
	},
	itemBottomItem: {
		flexDirection: 'row',
		alignItems: 'center',
		paddingTop: 10 * scale,
		paddingBottom: 10 * scale
	},
	require: {
		fontSize: 14 * scale,
		color: '#D0021B',
		paddingRight: 15 * scale
	},
	itemHead: {
		flexDirection: 'row',
		justifyContent: 'space-between'
	},
	name: {
		width: 70 * scale,
		fontSize: 13 * scale,
		textAlign: 'right'
	},
	surplus: {
		fontSize: 12 * scale,
		color: style.color.lightRed,
		paddingLeft: 30 * scale,
		marginBottom: 5 * scale
	},
	statusBox: {
		width: 80 * scale,
		height: 24 * scale,
		marginBottom: 12 * scale,
		backgroundColor: '#7FBBFE',
		justifyContent: 'center',
		alignItems: 'center',
		marginLeft: -15 * scale,
		borderTopRightRadius: 6 * scale,
		borderBottomRightRadius: 6 * scale
	},
	statusName: {
		fontSize: 13 * scale,
		color: '#fff'
	},
	findMerge: {
		fontSize: 10 * scale,
		color: style.color.themeColor,
		position: 'absolute',
		right: -5 * scale,
		top: 13 * scale
	},
	selectStyle: {
		height: 12 * scale,
		width: 12 * scale,
		marginRight: 6 * scale
	},
	quantity: {
		width: 120 * scale,
		paddingLeft: 25 * scale,
	}
})